<template>
  <div class="supervision-left">
    <div class="supervision-left-top" style="cursor: pointer;" @click="gohome">
      <img src="@/assets/img/townPreview/回到首页.png" alt="">
      <span>回到首页</span>
    </div>
    <div class="supervision-left-content">
      <!-- <left-item v-for="(item,index) in list" :key="index" :item="item" /> -->
      <div class="full-right-table">
        <div class="full-right-table-title" style="font-size:18px">
          村居三资清单
        </div>
        <dv-scroll-board :config="config1" style="width:100%;height:90%" />
      </div>
      <div class="left-table">
        <div class="left-table-title">{{ tableData.title }}</div>
        <div class="left-table-content">
          <dv-scroll-board
            :config="tableData.data"
            style="width:100%;height:100%"
            @click="goEMa"
          />
        </div>
      </div>
    </div>
    <a-modal
      :visible="dbclickVisible"
      width="88vw"
      class="dbclickModal"
      :body-style="{ height: '60vh' }"
      cancel-text="取消"
      ok-text="确定"
      @ok="dbclickOk"
      @cancel="dbclickCancel"
    >
      <table-common :menu-id="1627546142847" :filter-list="[]" />
    </a-modal>
  </div>
</template>

<script>
// import VEcharts from '@/components/vecharts';
// import LeftItem from './LeftItem';
import _ from 'lodash';
// import { getQueryBodyByProduce } from "@/api/dynamicInterface";
import tableCommon from '@/components/tableCommon/index.vue';

export default {
  name: 'Left',
  components: {
    // VEcharts,
    // LeftItem,
    tableCommon
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    table: {
      type: Object,
      default: () => ({})
    },
    table1: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // tableData: {},
      tableList: [],
      dbclickVisible: false,
      config1: {
        header: ['单位', '资金', '资产', '资源'],
        data: [
          ['下方桥社区', '0', '0', '0'],
          ['迎驾桥社区', '0', '0', '0'],
          ['阳嘉龙社区', '0', '0', '0'],
          ['高泽', '0', '0', '0'],
          ['官湖沿', '0', '0', '0'],
          ['梅林', '0', '0', '0'],
          ['柯北', '0', '0', '0'],
          ['丈午', '0', '0', '0'],
          ['陶里', '0', '0', '0'],
          ['朝阳', '0', '0', '0'],
          ['增大', '0', '0', '0'],
          ['光明', '0', '0', '0'],
          ['曙光', '0', '0', '0'],
          ['群贤', '0', '0', '0'],
          ['兴齐', '0', '0', '0'],
          ['羊山', '0', '0', '0']
        ],
        headerBGC: '#306494',
        rowNum: 8,
        columnWidth: [500, 500, 250, 250]
      }
    };
  },
  // created() {
  //   this.getTableData();
  // },
  computed: {
    tableData() {
      const data = _.cloneDeep(this.table1);
      const tableData = data.data && data.data.data;
      tableData && tableData.length && tableData.forEach(i => {
        i[1] = `<span style="color:#c1c919;">${i[1]}</span>`;
        i[2] = `<span style="color:#C1C919;">${i[2]}</span>`;
        // if (i[3] === '低风险') {
        //   i[3] = `<span style="color:#37CA61;">${i[3]}</span>`;
        // } else if (i[3] === '中风险') {
        //   i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
        // } else if (i[3] === '高风险') {
        //   i[3] = `<span style="color:#9F2115;">${i[3]}</span>`;
        // }
        i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
      });
      return data;
    },
    menuList() {
      return this.$store.state.permission.menuList;
    }
  },
  methods: {
    goEMa(val) {
      // console.log(val);
      const { row } = val;
      // const params={
      //   path: '/yjvld/sxbil/lhmeu',
      //   query:{
      //     PROGRAMNAME2:row[0]
      //   }
      // }
      // this.$router.push(params);
      if (row[0] === '高标准农田建设') {
        this.getItem(this.menuList, '/digitalReportQr1/index.vue');
        this.goRoute(this.btnItem, row[0]);
      }
    },
    getItem(arr, name) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].componentPath === name) {
          this.btnItem = arr[i];
        }
        if (arr[i].children) {
          this.getItem(arr[i].children, name);
        }
      }
    },
    goRoute(item, Name) {
      const params = {
        path: item.path,
        query: {
          parentName: item.parentTitle,
          title: item.title,
          menuId: item.id,
          flag: 0,
          sId: 'TabsTable',
          isHideLeft: item.isHideLeft,
          isHideTop: item.isHideTop,
          // isShow: true
          PROGRAMNAME2: Name
        }
      };
      if (item.isTargetNew + '' === '0') {
        this.$router.push(params);
      } else {
        const routeUrl = this.$router.resolve(params);
        const tempwindow = window.open('_blank'); // 先打开页面
        tempwindow.location = routeUrl.href; // 后更改页面地址
      }
    },
    dbclickCancel() {
      this.dbclickVisible = false;
    },
    dbclickOk() {
      this.dbclickVisible = false;
    },
    gohome() {
      this.$router.push('/');
    },
    getTableData() {
      const data = _.cloneDeep(this.table1);
      // getQueryBodyByProduce({
      //   pageIndex: 0,
      //   pageSize: 100,
      //   tableId: 824,
      //   pageType: 1
      // }).then(res => {
      //   if (res.success && res.data.length) {
      //     this.tableList = res.data;
      //     data.data.data = [];
      //     res.data.forEach(item => {
      //       const arr = [];
      //       arr[0] = item.PROGRAMNAME2;
      //       arr[1] = item.EJXMJE;
      //       arr[2] = item.PROGRAMNAME2 === "高标准农田建设" ? 4 : 0;
      //       data.data.data.push(arr);
      //     });
      //   }

      // });
      this.tableData = data;
    },
    tableClick({ rowIndex }) {
      // this.dbclickVisible = true;
      // const { PROGRAMCODE2 } = this.tableList[rowIndex];
    }
  }
  // computed: {
  //   tableData() {
  //     const data = _.cloneDeep(this.table);
  //     const tableData = data.data && data.data.data;
  //     tableData && tableData.length && tableData.forEach(i => {
  //       i[1] = `<span style="color:#c1c919;">${i[1]}</span>`;
  //       i[2] = `<span style="color:#C1C919;">${i[2]}</span>`;
  //       // if (i[3] === '低风险') {
  //       //   i[3] = `<span style="color:#37CA61;">${i[3]}</span>`;
  //       // } else if (i[3] === '中风险') {
  //       //   i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
  //       // } else if (i[3] === '高风险') {
  //       //   i[3] = `<span style="color:#9F2115;">${i[3]}</span>`;
  //       // }
  //       i[3] = `<span style="color:#C1C919;">${i[3]}</span>`;
  //     });
  //     return data;
  //   }
  // }
};
</script>

<style lang="scss" scoped>
.supervision-left {
  padding: 1%;
  color: #1fd2ff;
  .supervision-left-top {
    border: 1px solid #1fd2ff;
    border-radius: 9px;
    padding: 5px 25px;
    height: 34px;
    text-align: center;
    img {
      vertical-align: middle;
    }
    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 14px;
    }
  }
  .supervision-left-content {
    height: calc(100% - 34px);
    padding-top: 1%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .left-item {
      margin-top: 10px;
      height: 33%;
      width: 100%;
    }
    .left-table {
      margin-top: 10px;
      height: calc(34% - 30px);
      background-image: url("~@/assets/images/fullscreen/xmlx.png");
      background-size: 100% 100%;
      padding: 10px;
      .left-table-title {
        height: 30px;
        font-size: 18px;
      }
      .left-table-content {
        height: calc(100% - 30px);
        .dv-scroll-board {
          color: #1fd2ff;
        }
      }
    }
  }
}
.full-right-table {
  background-image: url("~@/assets/images/fullscreen/xmlx.png");
  background-size: 100% 100%;
  padding: 10px;
  height: 67%;
  .full-right-table-title {
    height: 10%;
    color: #1fd2ff;
    padding-left: 20px;
  }
  .dv-scroll-board {
    color: #1fd2ff;
  }
}
</style>
